<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>有贝口腔网-登录</title>
    <meta name="keywords" content="有贝口腔网,口腔网,口腔知识,口腔资讯,口腔问答,口腔诊所,口腔厂家,在线看牙">
    <meta name="description" content="有贝口腔网是一家专注互联网口腔服务网站，为用户提供腔知识,口腔资讯,口腔问答,口腔诊所,诊所入住,口腔厂家,厂家入住,在线看牙等综合服务口腔网站">
    <link rel="stylesheet" href="/css/reset.css">
    <link rel="stylesheet" href="/css/login.css">

    <script type="text/javascript">
        var basePath = "/";
    </script>
    <script src="/js/common.js"></script>
    <script src="/js/jquery-3.5.1.min.js"></script>
    <script src="/js/footfixed.js"></script>

    <script src="/js/md5.js" type="text/javascript"></script>

    <script src="http://www.hasbei.com/static/layer/layer.js" type="text/javascript"></script>
    <link rel="stylesheet" href="http://www.hasbei.com/static/layer/theme/default/layer.css?v=3.1.1" id="layuicss-layer">


</head>
<body>
<div class="container">

    <input id="isd" value="" type="hidden">
    <!-- 是否弹窗隐藏 -->
    <div>
        <h1>Welcome</h1>
        <h2>欢迎登录有贝口腔网</h2>
    </div>
    <form class="form" onsubmit="return false;">
        <div class="form-top">
            <a class="active" href="javascript:;">登录</a>

            <a href="/login/register">注册</a>

        </div>

        <div class="form-mian">

            <div class="login">
                <label>
                    <input type="text" placeholder="请输入手机号/邮箱" id="phone" name="phone">
                </label>
                <label class="login-phone">
                    <input type="password" minlength="6" placeholder="请输入6~18位密码" id="password" name="name">
                </label>

                <div class="img-check-code">
                    <label>
                        <input placeholder="请输入图形验证码" id="code" name="code">
                    </label>
                    <img id="codeImg" alt="有贝口腔网" src="/kaptcha">
                </div>


                <div class="num-check-code" style="display: none;">
                    <label>
                        <input type="text" placeholder="请输入验证码" id="check-code" name="check-code">
                    </label>
                    <button class="send-btn" type="button">发送验证码</button>
                </div>

                <input class="sub-btn login-btn" type="submit" value="登录">
                <div class="form-bottom">
                    <div class="login-type-change" res="0">手机/邮箱验证码登录</div>
                    <div class="forget-password"><a href="/login/pass" target="_blank">忘记密码</a></div>
                </div>
            </div>
        </div>

        <div class="agree-form-item">
            <!-- <input type="checkbox" id="protocol" name="protocol"> -->
            <div>
                <label for="protocol"><span>登录/注册即表示你同意</span></label>
                <a href="http://www.hasbei.com/about/agree" target="_blank">《用户协议》</a>
                <a href="http://www.hasbei.com/about/privacy" target="_blank">《隐私政策》</a>
            </div>
        </div>

    </form>
</div>

</body>
<script type="text/javascript">

    $(function () {

        function login() {
            var userName = $("#phone").val();
            var code = $("#check-code").val();//短信验证码
            var pwd = $("#password").val();
            var rcode = $("#code").val();//图形验证码



            if (isBlank(userName)) {
                alert("请输入手机号/邮箱");
                return;
            }
            //如果密码不为空
            if (!isBlank(pwd)) {
                if (pwd.length < 6) {
                    alert("请正确输入密码");
                    return;
                }
                if (isBlank(rcode)) {
                    alert("请输入图形验证码");
                    return;
                }
                pwd = MD5(pwd);
                code = rcode;// 设置成图形验证码
            }
            if (isBlank(code)) {
                alert("请输入验证码");
                return;
            }
            var data = {};
            data["iphone"] = userName;
            data["code"] = rcode;
            data["auth"]= code;
            data["password"] = pwd;
            $.ajax({
                type: "POST",
                url: basePath + "user/login",
                data: data,
                success: function (data) {
                    console.log(data)
                    if (data.msg == 'success' && data.code == '200') {
                        layer.msg("登录成功");
                        //重回进入页面
                        forwardIntoUrl(1000);

                    } else {
                        layer.msg(data.msg);
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    alert("链接错误,请联系管理员");
                }
            });
        }

        function sendCode(obj) {
            var userName = $("#phone").val();
            var rcode = $("#code").val();
            if (isBlank(userName)) {
                alert("请输入手机号/邮箱");
                return;
            }
            if (isBlank(rcode)) {
                alert("请输入图形验证码");
                return;
            }
            var data = {};
            data["iphone_email"] = userName;
            data["code"] = rcode;
            $.post(basePath + "user/code", data, function (data) {
                console.log(data)
                if (data.code=='101' ) {
                    daojishi(data.time, obj);
                } else {
                    layer.msg(data.msg);
                }
            });
        }

        $("#codeImg").click(function () {
            reCode();
        });

        function reCode() {
            $("#codeImg").attr("src","/kaptcha?" + new Date());
        }

        //图形验证码
        // reCode();

        //=========================
        var phone = new RegExp(/^1\d{10}$/); //手机号码验证
        var youxiang = new RegExp(/^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/);  //邮箱验证

        $(".num-check-code").hide();
        $(".login-type-change").click(function () {
            var i = $(".login-type-change").attr("res");
            if (i == 0) {
                $(this).attr("res", "1");
                $(".num-check-code").show();
                $(".login-phone").hide();
                $("#phone").attr('placeholder', '请输入手机号/邮箱');
                $(this).text("账号密码登录");
                $(".forget-password").hide();
                $("#password").val("");//清空密码
            } else {
                $(this).attr("res", "0");
                $(".num-check-code").hide();
                $(".login-phone").show();
                $("#phone").attr('placeholder', '请输入手机号/邮箱');
                $(this).text("手机/邮箱验证码登录");
                $(".forget-password").show();
                $("#password").val("");
            }
        })

        $(".login-btn").click(function () {
            var loginPhone = $("#phone").val();
            var password = $("#password").val();
            var code = $("#code").val();
            var checkcode = $("#check-code").val();
            var i = $(".login-type-change").attr("res");



            if (loginPhone.indexOf('@') < 0 && !phone.test(loginPhone)) {
                layer.msg("请输入正确的手机号/邮箱");
                return false
            }

            if (i == 0 && password == '' || i == 0 && password.length < 6) {
                layer.msg("请输入6~18位密码");
                return false
            }

            if (code == '') {
                layer.msg("请输入图中验证码");
                return false
            }

            if (i == 1 && checkcode == '') {
                layer.msg("请获取验证码");
                return false
            }

            /* if(!$('#protocol').is(':checked')) {
                layer.msg("请勾选用户协议");
                return false
            } */
            //登录
            login();
        })

        function daojishi(seconds, obj) {
            if (seconds > 1) {
                $(obj).css("background-color", "#ccc");
                seconds--;
                $(obj).text(seconds + "s后重新发送").attr("disabled", true);//禁用按钮
                // 定时1秒调用一次
                setTimeout(function () {
                    daojishi(seconds, obj);
                }, 1000);
            } else {
                $(obj).css("background-color", "#1482C8");
                $(obj).text("发送验证码").attr("disabled", false);//启用按钮
            }
        }

        $(".send-btn").click(function () {
            var loginPhone = $("#phone").val();
            if (loginPhone.indexOf('@') < 0 && !phone.test(loginPhone)) {
                layer.msg("请输入正确的手机号/邮箱");
                return false
            }
            var code = $("#code").val();
            if (code == '') {
                layer.msg("请输入图中验证码");
                return false
            }
            //发送验证码
            sendCode(this);
        })
    })
</script>
</html>